<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .nav {
            background: white;
            width: 100%;
            display: flex;
            justify-content: space-around;
            height: 90px;
            border-top: 2px solid red;
            position: fixed;
            bottom: 0;
            left: 0;
        }
        
        .nav li {
            list-style: none;
            flex: 1;
            text-align: center;
            line-height: 90px;
        }
        
        .router-link-active {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- vue-router提供的跳转组件 router-link -->
        <ul class="nav">
            <li>
                <router-link to="/home">首页</router-link>
            </li>
            <li>
                <router-link to="/cate">分类</router-link>
            </li>
            <li>
                <router-link to="/cart">购物车</router-link>
            </li>
        </ul>

        <!-- vue-router提供的视口显示组件  router-view  -->
        <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>
        // 1.准备组件 配置成路由
        var Home = {
            template: `<div><h1>我是主页</h1></div>`,
            data() {
                return {}
            }
        }
        var Category = {
            template: `<div style="height:1000px;background:green;"><h1>我是分类组件</h1></div>`,
            data() {
                return {}
            }
        }
        var Cart = {
                template: `<div><h1>我是购物车组件</h1></div>`,
                data() {
                    return {}
                }
            }
            // 2. 准备好路由配置项
        var routes = [
                // path 跳转路径  component:要加载的组件   name 组件的名字
                {
                    path: "/home",
                    component: Home,
                    name: "home"
                }, {
                    path: "/cate",
                    component: Category,
                    name: 'cate'
                }, {
                    path: '/cart',
                    component: Cart,
                    name: "cart"
                }
            ]
            // 3 创建vue路由对象
        var router = new VueRouter({
                routes: routes
            })
            //4.将路由对象 配置到vue实例
        new Vue({
            el: "#app",
            data() {
                return {}
            },
            router: router,
            components: {}
        })
    </script>
</body>

</html>